{% load i18n static %}

<script type="text/x-template" id="suit-overview">
  <div class="dashboard-overview">
    <a-row>
      <a-col :xs="24" :sm="12">
        <div class="overview-left">
          <div class="overview-avatar">
            <a-avatar shape="square" :size="82" icon="user"></a-avatar>
          </div>
          <div class="overview-greeting">
            <h2>早安，山治，我要吃肉！</h2>
            <div>假砖家 | 黄金梅丽号－厨房－小强部门</div>
          </div>
        </div>
      </a-col>
      <a-col :xs="24" :sm="12">
        <div class="overview-right">
          <a-row type="flex" justify="end">
            <a-col :span="4">
              <div class="overview-ranks">
                <div>项目数</div>
                <div>56</div>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="overview-ranks">
                <div>项目数</div>
                <div>56</div>
              </div>
            </a-col>
            <a-col :span="4">
              <div class="overview-ranks">
                <div>项目数</div>
                <div>56</div>
              </div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</script>

<script type="application/javascript">
    Vue.component('suit-overview', {
      delimiters: ['<%', '%>'],
      template: '#suit-overview',
    });
</script>